<template>
	<view>
		<view class="top-box">
			<image class="top-bg" style="width: 695rpx;height: 262rpx;" :src="imgUrl + 'wallet-bg.png'"></image>
			<view class="top-text-box">
				<view style="margin-left: 30rpx;margin-top: 37rpx;font-size: 30rpx;color: white;">
					总资产：
				</view>
				<view class="top-text-box-but">
					<view style="transform: translateY(-20rpx);">
						我的金额：
					</view>
					<view>
						<text>￥</text>
						<text style="font-size: 90rpx;">{{int}}</text>
						<text style="font-size: 30rpx;">.{{float}}</text>
					</view>
				</view>

			</view>
		</view>
		<view style="padding-top: 50rpx;padding-left: 33rpx;font-size: 36rpx;color: #323232;font-weight: 600;">
			充值金额
		</view>

		<view class="price-bigbox">
			<view @click="xuan(it,i)" :class="actindex == i  ? 'priceact' : 'pricenoact' " class="price-list"
				v-for="(it,i) in chongzhi" :key="i">
				<view style="font-weight: 600;font-size: 40rpx;">{{it.pay_money}}</view>
				<view class="price-text">送{{it.money-it.pay_money}}元</view>
			</view>
		</view>

		<view class="pay-box">
			<view class="title-pay">选择支付方式</view>
			<view class="pay-list d-flex d-between" v-for="(it, i) in payArr" :key="i" @click="payClick(it.pay_type)">
				<view class="d-flex">
					<u-icon name="weixin-fill" size="50" color="#4FB674"></u-icon>
					<text style="padding-left: 20rpx;font-size: 30rpx;color: #333;">{{it.title}}</text>
				</view>
				<radio :checked="it.pay_type == pay_type" color="#FF723B"></radio>
			</view>
		</view>


		<view class="but" @click="chongzhiClick">
			立即充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/',
				payArr: [{
						title: '微信支付',
						pay_type: 1
					},
					// {
					// 	logo: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/wallet.png',
					// 	title: '余额现金',
					// 	pay_type: 3
					// }
				],
				actindex: 0,
				walletMoney: '100.10',
				int: 0,
				float: 0,
				chongzhi: [],
				value: '',
				recharge_id: '',
				pay_type: 1,
				store_id: '',
				check:0
			}
		},
		onLoad() {
			let loginstatus = uni.getStorageSync('token');
			if(loginstatus)
			{
				this.check = 1
				this.getChong()
				this.store_id = uni.getStorageSync('store_id')
				this.getMoney()
			}
		},
		methods: {
			payClick(i) {
				this.pay_type = i
			},
			xuan(it, i) {
				this.actindex = i;
				this.recharge_id = it.id
			},
			getChong() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/recharge/list', {}, true).then(res => {
					if (res.data.code == 200) {
						this.chongzhi = res.data.data.list
						// let moneyarr = res.data.data.money.split('.')
						// this.int = moneyarr[0]
						// this.float = moneyarr[1]
						this.recharge_id = this.chongzhi[0].id
					}
				})
			},
			getMoney() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					if (res.data.code == 200) {
						let moneyarr = res.data.data.money.split('.')
						this.int = moneyarr[0]
						this.float = moneyarr[1]
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			chongzhiClick() {
				if(this.check)
				{
					this.$ajaxRequest.post(this.baseUrl + 'shop/order/info', {
						type: 5,
						pay_type: this.pay_type,
						recharge_id: this.recharge_id,
						store_id: this.store_id
					}, false).then(res => {
						console.log(res)
						this.$ajaxRequest.post(this.baseUrl + 'shop/order/pay', {
							order_id: res.data.data.order_id,
							pay_type: this.pay_type,
						}, true).then(result => {
							console.log(result, '支付')
							if (result.data.code == 201 || result.data.code == 200) {
								console.log('pay_type =' + this.pay_type)
								if (this.pay_type == 1) { // 微信支付
									uni.getProvider({
										service: 'payment',
										success: function(payRes) {
											if (~payRes.provider.indexOf('wxpay')) {
												uni.requestPayment({
													provider: 'wxpay',
													timeStamp: result.data.data.timeStamp,
													nonceStr: result.data.data.nonceStr,
													package: result.data.data.package,
													signType: result.data.data.signType,
													paySign: result.data.data.paySign,
													success: function(res) {
														console.log('success:' + res);
														uni.showToast({
															title: '支付成功',
															icon: 'none'
														})
														uni.navigateBack({
															delta: 1
														})
													},
													fail: function(err) {
														console.log(err);
														uni.showToast({
															title: '支付失败',
															icon: 'none'
														})
													}
												});
											}
										}
									});
								} else { // 余额支付
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
									uni.navigateBack({
										delta: 1
									})
								}
							} else {
								uni.showToast({
									title: result.data.msg,
									icon: 'none'
								})
							}
						})

					})
				}else{
					uni.showToast({
						title:'请先登录',
						icon:'error'
					})
				}
			}
		}
	}
</script>

<style>
	.priceact {
		color: #FF723B;
		background: rgba(255, 114, 59, .2);
		border: 2rpx solid rgba(255, 114, 59, 1);
		border-radius: 10px;
	}

	.priceact>.price-text {
		color: #FF723B;
		font-size: 30rpx;
	}

	.pricenoact>.price-text {
		color: #A7A7A7;
		font-size: 30rpx;
	}

	.pricenoact {
		color: #323232;
		border: 2rpx solid rgba(216, 216, 216, 1);
		border-radius: 10px;
	}

	.price-list {
		width: 210rpx;
		height: 130rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.price-bigbox {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.but {
		position: fixed;
		bottom: 30rpx;
		width: 690rpx;
		left: 30rpx;
		padding: 20rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 30rpx;
		background: linear-gradient(-17deg, rgba(255, 114, 59, 1), rgba(255, 147, 67, 1));
		color: white;
		border-radius: 40rpx;
	}

	.cont-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid rgba(167, 167, 167, .2);
	}

	.title {
		padding: 10rpx 30rpx 10rpx 30rpx;
		color: #323232;
		font-size: 30rpx;
		background-color: #F5F5F5;
		font-weight: 600;
	}

	.top-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		margin-top: 30rpx;
	}

	.top-bg {
		top: 0rpx;
		position: absolute;
	}

	.top-text-box {
		width: 695rpx;
		position: relative;
		z-index: 10;
	}

	.top-text-box-but {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		color: white;
		margin-top: 20rpx;
	}

	.title-pay {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		padding-left: 32rpx;
	}

	.pay-list {
		padding: 20rpx 30rpx;
	}

	@font-face {
		font-family: 'iconfont';
		src: url('data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQ0AA0AAAAACKwAAAPfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCUhEICoRwhBoLDgABNgIkAxQEIAWFCAdIG2EHUZQvSpjsY/XlHEWS3IyH//b73z4zc+WbJk0mobvhVaxkFglCJlG6h0IimZTwfnhPe0nGZEZvotuJbQegGcGD9UX9yYpL9Su+P8h+jb1agC618U9Egq1QOBiBBhaqjWLV/sEDFExUg5SBeU5OkKJxnIWAz9OqXIAv5Xmz3LUR9GIcSEJWCQUJUSBeATvpBXodwEvg9fEfDIILJFUGbuLpfecEsPsl+OYDxvrPggiGAQdBADIyJiDgECYwgc060Golfgm+SX/z4f9/UGolf0j2SkoDAvKIGgRvIgHJzxOA/xCd/4CCGvSiF58AYhgAFABkWT0zE8d5ePQFcFwE5y5h9c9P43yNu4uDCEbeI/ib7gDgjbdhQHLggCAgiueaZfDRBeUZyRByqWmBNd+4iBQ8eEC9fz/o0aPghw9DHz6ksT4LEQ7QmmZY/WI4DN+XQ/BZOXKOIBDarNSQKkEbHFvakaQGD80pz4xIBBE9PaxukSAoCVm8Z0qlPXoUN7uYQhTQDFWJxdAZAp4dFHyBIFbDm06wjivNniRPBfF+gyss9QyFTjE/Ce0L8dS9EnqprKC0r6SgXPlE+ZgSV2emusKTNTJ2S+NRs4egvbjHa48LQvXK9UoNyg1C0PIy2ihrF7IhmyZlo3bi+Dm0FW07fpY/AOu5eqEf68NAAmWs++pFMhDkjls0Xn75b7fjjfEI0DSKPyMgwMMXT4mDMzIypz2c8ieQe1ztPk3UZtYLNS6E9C33vP2H8u92HMiDHSKCpq+0kgiJAATl0DT8bPTO4xgDCU97Fc+MkbSYQ90j3SVxEe++nADkCa/lsKKz4z0oP4VxVFmFjKA3VzAS/G/VeqvIheeZ2ljjkU3XpKlm1PFtmqn/y4p1duC7TUXN6AAQCM7evH8ZzW/1m4tgg3bgMOg8Z4O8AKCVQFB3RykApSZJpfilBxSOxACB2gEOkNCtGx0Qw14Ckh+jpSG0LpE0niFrPWeL+BqVHm9Ra31Ft6VwWN5jJHoBE4UbWAQAwiAHJP3uIRuUxxaxHZVxS6gNuoVu1z5M7zEb6YDbkI0uVq6gT0ARp8iaJF6GdIw+uXC6tyb8XYT/CfvOECgNzssBztEx5UkVKxs8QNeu//Yp6zW6bDmSKin06dADU9fe9XX0wrI7xPjDN63mJTnyMRnIlYuBgiFbhjQULnF8gi5VqgwUmbJlSEYXL5cO2PcozMlnGuTmMia7/iO+/jFn+DFkG+Bh8sQNZ0GXLkbCto74LFMwF0kxQvs780g/0Y1u7P01QgoUwRA2jqyk2LjYDKIoKZ35Xx9jivLoHAX0pMKkdAA=') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 40rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-qiabao:before {
		content: "\e611";
	}

	.icon-yingshouyue:before {
		content: "\e66e";
	}

	.icon-weixin:before {
		content: "\e6ea";
	}

	.weixin-icon {
		color: #4FB674;
	}

	.card-icon {
		color: #405EDD;
	}

	.yue-icon {
		color: #FF723B;
	}
</style>
